<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 主页示例模板二</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <!-- 引入主题 -->
    <script src="https://www.runoob.com/static/js/wonderland.js"></script>

</head>


<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    销售量
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">日</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font" id="TodayTatal">19120</p>
                    <p>
                        总销售量
                        <span class="layuiadmin-span-color" id="AllTatal">213212312<i class="layui-inline layui-icon layui-icon-flag"></i></span>
                    </p>
                </div>
            </div>
        </div>


        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    收入
                    <span class="layui-badge layui-bg-green layuiadmin-badge">日</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font" id="TodayTprice">999,666</p>
                    <p>
                        总收入
                        <span class="layuiadmin-span-color" id="AllTprice">*** <i class="layui-inline layui-icon layui-icon-dollar"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    新增电影
                    <span class="layui-badge layui-bg-orange layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font" id="MouthFilm">66,666</p>
                    <p>
                        全部电影
                        <span class="layuiadmin-span-color"id="AllFilm">6666,666<i class="layui-inline layui-icon layui-icon-user"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3" >
            <div class="layuiadmin-card-list" style="height: 40px">
                <p class="layuiadmin-normal-font">月销售量</p>
                <span>同上期增长</span>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" id="MouthTatal" >
                    <div class="layui-progress-bar" lay-percent="30%" ></div>
                </div>
            </div>
            <div class="layuiadmin-card-list" style="height: 20px">
                <p class="layuiadmin-normal-font">月收入</p>
                <span>同上期增长</span>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" id="MouthTprice">
                    <div class="layui-progress-bar" lay-percent="20%"></div>
                </div>
            </div>
        </div>



        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <p class="layuiadmin-normal-font" style="float:left">1.销售折线统计图</p>
                    <p class="layuiadmin-normal-font" style="float: right"> 2.今日销售记录柱状图</p>
                </div>

                <div class="layui-card-body">
                    <div class="layui-row">

                        <div id="main" style="width: 500px;height:400px;float: right"></div>

                        <button type="button" id="restore" class="layui-btn"style="width: 30px;height: 30px;padding: 0">
                            <i class="layui-icon layui-icon-refresh" style="font-size: 10px;padding: 0" ;margin: 0></i>
                        </button>

                        <div id="main1" style="width: 600px;height:400px;"></div>


                    </div>
                </div>
            </div>
        </div>
        </div>

    </div>
</div>
</div>

<script src="../../layuiadmin/layui/layui.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main1'));
    var myChart3 = echarts.init(document.getElementById('main1'));

    $(function () {

        setajax1();
        setajax2();
        setajax5()

        var years=null;
        var months=null;
        myChart1.on('click', function (params) {
            if (years==null) {
                console.log(params.name);
                years = params.name;
                myChart1=null;
                setajax3(years);
                myChart2.on('click', function (params) {
                    if (months==null) {
                        months = params.name;
                        myChart2=null;
                        setajax4(years, months);
                    }
                });

            }
        });

        $("#restore").click(function () {
            window.location.reload();
            setajax2();
        })

    })

    function setajax1() {
        $.ajax({
            async:true,
            type:"GET",
            url:"${pageContext.request.contextPath}/back/saleData/today",
            dataType:"json",
            success:function (result) {
                console.log(result);
                var servicedata=[];
                var servicedata1=[];
                var servicedata2=[];
                $.each(result ,function (index,data) {
                    console.log(data.screening.film.filmName);
                    console.log(data.salesCount);
                    servicedata[index]=data.screening.film.filmName;
                    servicedata1[index]=data.salesCount;
                    servicedata2[index]=data.salesPrice;
                })
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['销售量', '营业额']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: servicedata,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销售量',
                            type: 'bar',

                            data:servicedata1
                        },
                        {
                            name: '营业额',
                            type: 'bar',
                            data: servicedata2
                        }

                    ]
                };
                myChart.setOption(option);
            },
            error:function () {
                alert("异步请求失败!");
            }
        })
    }

    function setajax2() {

        $.ajax({
            async:true,
            type:"GET",
            url:"${pageContext.request.contextPath}/back/saleData1",
            dataType:"json",
            success:function (result) {
                console.log(result);
                var servicedata=[];
                var servicedata1=[];
                var servicedata2=[];
                $.each(result ,function (index,data) {
                    servicedata[index]=data.years;
                    servicedata1[index]=data.total;
                    servicedata2[index]=data.tprice;
                })

                option = {
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['销售量', '营业额']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:servicedata
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '销售量',
                            type: 'line',
                            stack: '总量',
                            data:servicedata1
                        },
                        {
                            name: '营业额',
                            type: 'line',
                            stack: '总量',
                            data: servicedata2
                        }
                    ]
                };

                myChart1.setOption(option);
            },
            error:function () {
                alert("异步请求失败!");
            }
        })
    }

    function setajax3(years) {

        $.ajax({
            async:true,
            type:"GET",
            url:"${pageContext.request.contextPath}/back/saleData2/"+years+"",
            dataType:"json",
            success:function (result) {
                console.log(result);
                var servicedata=[];
                var servicedata1=[];
                var servicedata2=[];
                $.each(result ,function (index,data) {
                    servicedata[index]=data.months;
                    servicedata1[index]=data.total;
                    servicedata2[index]=data.tprice;
                })
                option = {
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['销售量', '营业额']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:servicedata
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '销售量',
                            type: 'line',
                            stack: '总量',
                            data:servicedata1
                        },
                        {
                            name: '营业额',
                            type: 'line',
                            stack: '总量',
                            data: servicedata2
                        }
                    ]
                };

                myChart2.setOption(option);
            },
            error:function () {
                alert("异步请求失败!");
            }
        })
    }

    function setajax4(years,months) {

        $.ajax({
            async:true,
            type:"GET",
            url:"${pageContext.request.contextPath}/back/saleData3/"+years+"/"+months+"",
            dataType:"json",
            success:function (result) {
                console.log(result);
                var servicedata=[];
                var servicedata1=[];
                var servicedata2=[];
                $.each(result ,function (index,data) {
                    console.log(data.months);
                    console.log(data.salesCount);
                    servicedata[index]=data.days+"日";
                    servicedata1[index]=data.total;
                    servicedata2[index]=data.tprice;
                })

                option = {
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['销售量', '营业额']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:servicedata
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '销售量',
                            type: 'line',
                            stack: '总量',
                            data:servicedata1
                        },
                        {
                            name: '营业额',
                            type: 'line',
                            stack: '总量',
                            data: servicedata2
                        }
                    ]
                };

                myChart3.setOption(option);
            },
            error:function () {
                alert("异步请求失败!");
            }
        })
    }

    function setajax5() {


        $.ajax({
            async:true,
            type:"GET",
            url:"${pageContext.request.contextPath}/back/saleData4",
            dataType:"json",
            success:function (result) {

                console.log(result);
                $("#AllTprice").text(result.AllTprice);
                $("#AllTatal").text(result.AllTatal);
                $("#TodayTatal").text(result.TodayTatal);
                $("#TodayTprice").text(result.TodayTprice);
                var c1=" <div class=\"layui-progress-bar\" lay-percent=\""+result.MouthTatalproportion+"\" ></div>"
                var c2="<div class=\"layui-progress-bar\" lay-percent=\""+result.MouthTpriceproportion+"\"></div>"
                $("#MouthTprice").html(c2);
                $("#MouthTatal").html(c1);
                $("#MouthFilm").text(result.mouthFilm);
                $("#AllFilm").text(result.allFilm);


            },
            error:function () {
                alert("异步处理失败!")
            }
        })

    }

</script>


<script>
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'sample']);
</script>
</body>
</html>